<template>
<div>
  <x-search
    v-if="search"
    :showPageTitle="showPageTitle"
    :search="search"
    :download="download"
    :download2="download2"
    @downloadFn="downloadFn"
    @download2Fn="download2Fn"
    ref="xsearch"
    @searchFn="searchFn"/>
  <el-table
    v-loading="loading"
    :data="list"
    stripe
    style="width: 100%">
    <template v-for="(th_value,th_key) in table">

      <!--普通的字段显示,th_key.trim()解决数字形式的字符串自动升序问题-->
      <el-table-column
        :key="th_key"
        v-if="(th_key!='options' || th_key!='options2' || th_key!='status') && typeof(th_value)=='string'"
        :prop="th_key.trim()"
        :label="th_value">
      </el-table-column>

      <el-table-column
        :key="th_key"
        v-if="th_key==='options2'"
        :prop="table[th_key].name"
        :label="table[th_key].label">
        <template v-if="th_key=='options2'" slot-scope="scope">
          <el-link
            class="table-link"
            @click="tdClick(table[th_key], scope.row, scope.$index)"
            type="primary"
          >{{scope.row[table[th_key].name]}}</el-link>
        </template>
      </el-table-column>

      <el-table-column
          :key="th_key"
        v-if="th_key==='options'"
        :prop="th_key"
        label="操作">
        <template v-if="th_key=='options'" slot-scope="scope">
          <el-link
            class="table-link"
            v-for="(opt,optindex) in th_value"
            :style="opt.style"
            :key="optindex"
            :disabled="opt.disabled === true"
            @click="tdClick(opt, scope.row, scope.$index)"
            type="primary"
          >{{opt.name}}</el-link>
        </template>
      </el-table-column>
    </template>
  </el-table>

  <div style="width: 100%;height: auto;padding: 20px;display: flex;flex-direction:row-reverse" v-if="tableData==undefined">
    <el-pagination
      v-if="paging!==false"
      background
      layout="prev, pager, next"
      :total="paging.total"
      :page-size="paging.per_page"
      :current-page="paging.current_page"
      @current-change="pageChange">
    </el-pagination>
  </div>

</div>
</template>

<script>
import XSearch from "./XSearch";
export default {
  components:{XSearch},
  name: "MyTablePage",
  /**
   * tableData:自传数据-不走网络接口,【tip:更新时=>push方式更新----直接赋值或者$set都无效】
   * api:请求的table数据接口
   * apiQuery: 额外添加的参数
   * table：定义表数据
   * search：定义搜索数据
   * download：下载1
   * download2：下载2
   * showPageTitle：显示页面名称
   * tabIndex：tab页的位置【多个tab页面对应多个表】
   * searchAllQuery：是否查询所有参数【否则就查询非空参数】
   * listKey 接口返回的数组对应的key值
   */
  props:['tableData','api','apiQuery','table','search','download','download2','showPageTitle','tabIndex','searchAllQuery','listKey'],
  data(){
    return{
      list: [],
      paging: {},//paging: {current_page: 1, last_page: 3, per_page: 20, total: 51}
      loading: true,
    }
  },

  mounted() {
    if (this.tableData){
      this.list = this.tableData
      this.loading = false
    }else{
      this.callApi(this.getSearch())
    }
  },

  methods:{
    //操作的-编辑-删除-等自定义操作
    tdClick(opt, td, index) {
      this.$emit(opt.click, td, index,this.tabIndex);
    },

    callApi(search={}){
      if (!this.api) return ;
      if (this.apiQuery){
         Object.assign(search,this.apiQuery)
      }
      this.$http[this.api](search).then((res) => {
        this.loading = false;
        if (res && res.code == 200) {
          this.list = this.listKey ? res.data[this.listKey] :res.data.list
          this.paging = res.data.paging
          this.$emit('callApiTableDat',JSON.parse(JSON.stringify(res.data)))
        }
      });
    },

    pageChange(val){
      this.callApi(Object.assign({},this.getSearch(),{page:val}))
    },

    searchFn(search){
      // this.callApi(search)
      this.callApi(this.getSearch())
    },

    refresh(){
      this.callApi(this.getSearch())
    },

    getSearch(){
      return this.$refs['xsearch'] ? this.$refs['xsearch'].callSearchform(this.searchAllQuery == undefined) : {}
    },

    downloadFn(data){
      this.$emit('downloadFn',data)
    },

    download2Fn(data){
      this.$emit('download2Fn',data)
    }
  }
}
</script>

<style scoped>

</style>
